<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>05-iframe-不同源通信-父页面</title>
  </head>
  <body>
    <h2>父页面</h2>
    <button id="btn">父页面传递数据</button>
    <hr />
    <iframe
      id="iframe"
      src="http://127.0.0.1:5501/code/05-iframe-%E4%B8%8D%E5%90%8C%E6%BA%90%E9%80%9A%E4%BF%A1-%E5%AD%90%E9%A1%B5%E9%9D%A2.html"
      frameborder="0"
    ></iframe>
    <script>
      /*
            父页面向子页面传递数据（父向子传参）
                传递数据：
                    postMessage(要传递的数据,子页面协议端口域名地址)
                接收数据:
                    onmessage
            子页面向父页面传递数据（子向父传参）
                传递数据：
                    postMessage(要传递的数据,子页面协议端口域名地址)
                接收数据:
                    onmessage
        */
      //   window.aaa = "父页面数据";
      const iframe = document.getElementById("iframe");
      btn.onclick = function () {
        const childWindow = iframe.contentWindow;
        // 父页面给子页面传递数据
        childWindow.postMessage("来自父页面的数据", "http://127.0.0.1:5501");
        // console.log("给子页面传递数据");
      };

      //   父页面接收数据
      window.onmessage = function ({ data }) {
        console.log(data);
      };
    </script>
  </body>
</html>
